<template>
  <h1>EL-表格组件</h1>
  <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号" type="index" width="80"/>
      <ekl-table-column label="日期" prop="date" width="180"/>
      <el-table-column label="姓名" prop="name" width="180"/>
      <el-table-column label="地址" prop="address"/>
  </el-table>
  <el-table :data="data" style="width: 600px;margin:0 auto" >
    <el-table-column label="编号" type="index" align="center" width="80"/>
    <el-table-column label="姓名" prop="name" align="center" />
    <el-table-column label="薪资" prop="salary" align="center" />
    <el-table-column label="职位" prop="job" align="center"/>
    <el-table-column label="操作" align="center">
      <template #default="scope" align="center">
<!--  template表示自定义的列，如果想要在表格嵌入其他组件，必须写在此template -->
<!--  #default 代表插槽slot，能让我i们将其他组件嵌入到表格里-->
<!--  scope对象用来保存表格的上下文数据
      scope.row就代表当前行对象，比如我们是一张用户表，一行就代表乐一个user
      scope.$index代表当前索引，从0开始-->
        <el-button-group>
        <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)" >编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
        </el-button-group>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
const data = ref([
  {
    name: '王小虎',
    salary: 2000,
    job: '程序员',
  },
  {
    name: '王中虎',
    salary: 3000,
    job: '销售员',
  },
  {
    name: '王大虎',
    salary: 4000,
    job: '幼儿员',
  },
  {
    name: '王小虎',
    salary: 2000,
    job: '程序员',
  },
  {
    name: '王中虎',
    salary: 3000,
    job: '销售员',
  },
  {
    name: '王大虎',
    salary: 4000,
    job: '幼儿员',
  }
])
const tableData = [
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  },
  {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
  }
]
const handleDelete=(index,emp)=>{
  if(confirm('你确定要删除吗？'+emp.name))
  emp.value.splice(index, 1)
}
</script>

<style scoped>

</style>